<template>
	<view>
		<view class="header">
			<view id="back">
				<u-icon name="arrow-left" @click="clickBack" size="60rpx" v-if="back"></u-icon>
			</view>
			<view id="nav-title">
				<text>加入班级</text>
			</view>
		</view>
		<view style="display: flex; flex-direction: row; justify-content: center; padding: 120rpx 0 80rpx;">
			<text style="font-size: 36rpx; color: rgba(133, 133, 151, 1); font-weight: 400;">请输入八位班级码</text>
		</view>
		<view class="frames">
			<view :id="getStyle(index)" @click="setCurrent(index)" v-for="(item, index) in nums" :key="index">{{getX(index)}}</view>
		</view>
		<view style="padding-top: 28rpx">
			<u-button @click="clickJoin" class="button" text="加入班级" :disabled="btnDisabled"></u-button>
		</view>
		<view class="keypad">
			<view id="key" @click="onInput('1')">1</view>
			<view id="key" @click="onInput('2')">2</view>
			<view id="key" @click="onInput('3')">3</view>
			<view id="key" @click="onInput('4')">4</view>
			<view id="key" @click="onInput('5')">5</view>
			<view id="key" @click="onInput('6')">6</view>
			<view id="key" @click="onInput('7')">7</view>
			<view id="key" @click="onInput('8')">8</view>
			<view id="key" @click="onInput('9')">9</view>
			<view id="key-blank"> </view>
			<view id="key" @click="onInput('0')">0</view>
			<view id="key" @click="onInput('x')">
				<u-icon size="64" color="black" name="close-circle"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	const api = require('api.js');
	var _this = null;
	export default {
		data() {
			return {
				back: false,
				nums: [0, 1, 2, 3, 4, 5, 6, 7],
				codes: [],
				current: 0,
				btnDisabled: true
			}
		},
		methods: {
			clickBack: function(e) {
				var pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						url: pages[pages.length - 2].url
					})
				}
			},
			setCurrent: function(idx) {
				_this.current = idx;
			},
			checkButton: function() {
				var flag = true;
				_this.codes.forEach(ele => {
					if ('' == ele) {
						flag = false;
					}
				});
				if (flag && _this.codes.length >= 8) {
					_this.btnDisabled = false;
				} else {
					_this.btnDisabled = true;
				}
			},
			onInput: function(e) {
				if ('x' == e) {
					_this.codes[_this.current--] = '';
					if (_this.current < 0) {
						_this.current = 0;
					}
					_this.checkButton();
					_this.$forceUpdate();
					return;
				}
				_this.codes[_this.current++] = e;
				if (_this.current >= 7) {
					_this.current = 7;
				}
				_this.checkButton();
				_this.$forceUpdate();
			},
			getX: function(idx) {
				return idx < _this.codes.length ? _this.codes[idx] : '';
			},
			getStyle: function(idx) {
				return _this.current == idx ? 'frame-selected' : 'frame';
			},
			clickJoin: function() {
				var v = '';
				_this.codes.forEach(e => {
					v = v.concat(e);
				});
				if (v.length != 8) {
					return;
				}
				_this.btnDisabled = true;
				api.getSync('/api/depart/join/' + v, {}, (res) => {
					if (res.code == 200 && res.data != null && res.data.id != null) {
						setTimeout(() => {
							uni.showToast({
								icon: 'success',
								title: '加入成功',
								duration: 2000
							});
						}, 200);
						_this.clickBack();
						return;
					}
					setTimeout(() => {
						uni.showToast({
							icon: 'error',
							title: res.msg,
							duration: 2000
						});
					}, 200);
					_this.clickBack();
				}, (err) => {
					setTimeout(() => {
						uni.showToast({
							icon: 'error',
							title: '网络异常',
							duration: 2000
						});
					}, 200);
					_this.clickBack();
				});
			}
		},
		onLoad() {
			_this = this;
			_this.back = getCurrentPages().length > 1;
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: calc(var(--status-bar-height) + 86rpx);
		position: relative;
		background: white;

		#back {
			position: absolute;
			padding-top: calc(var(--status-bar-height) + 18rpx);
			padding-left: 12rpx;
			z-index: 99999;
		}

		#nav-title {
			position: absolute;
			padding-top: calc(var(--status-bar-height) + 20rpx);
			padding-left: 305rpx;
			font-weight: bold;
			font-size: 36rpx;
			z-index: 99;
		}
	}
	
	.frames {
		margin: 0 30rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		
		#frame {
			width: 70rpx;
			height: 76rpx;
			border: 2rpx solid rgba(184, 184, 210, 1);
			border-radius: 24rpx;
			margin: 4rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: 600;
		}
		
		#frame-selected {
			width: 70rpx;
			height: 76rpx;
			border: 2rpx solid rgba(61, 92, 255, 1);
			border-radius: 24rpx;
			margin: 4rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: 600;
		}
	}
	
	.button {
		width: 506rpx;
		height: 100rpx;
		border-width: 0;
		border-radius: 20rpx;
		background-color: $primary-color;
		color: white;
	}

	.keypad {
		position: fixed;
		bottom: 0;
		margin: 0 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;

		#key,
		#key-blank {
			width: 170rpx;
			height: 170rpx;
			margin: 20rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 48rpx;
			font-weight: 800;
			border-radius: 15rpx;
		}

		#key:active {
			background: rgba(0, 0, 0, 0.1);
		}
	}
</style>
